<template>
  <el-dialog v-model="dialogFormVisible" :title='title' width="600px" align-center draggable>
    <div class="dialog-content">
      <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="100px">
        <el-form-item label="账号" prop="account">
					<el-input v-model="formData.account" />
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="formData.password" show-password />
				</el-form-item>
				<el-form-item label="姓名" prop="name">
					<el-input v-model="formData.name" />
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<el-select v-model="formData.sex" placeholder="请选择性别">
						<el-option label="男" value="男" />
						<el-option label="女" value="女" />
					</el-select>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="formData.email" />
				</el-form-item>
				<el-form-item label="部门" prop="department">
					<el-select v-model="formData.department" placeholder="请选择部门">
						<el-option v-for="item in departmentData" :key="item" :label="item" :value="item" />
					</el-select>
				</el-form-item>
      </el-form>
    </div>
    <template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="addAdmin">确定</el-button>
			</span>
		</template>
  </el-dialog>
</template>
 
<script setup lang="ts">
  import { reactive, ref, onBeforeUnmount } from 'vue';
  import { ElMessage } from 'element-plus';
  import { bus } from "@/utils/mitt.js";
  import { createAdmin } from '@/api/userinfor.js';
	import { getDepartment } from '@/api/setting.js';

  const title = ref()
  interface FormData {
		account : number,
		password : string,
		name : string,
		sex : string,
		email : string,
		identity: string,
		department : string
	}
	const formData:FormData = reactive({
		account: null,
		password: '',
		name: '',
		sex: '',
		email: '',
		department: '',
		identity: '',
	})
	const rules = reactive({
		account: [
			// 失去焦点触发 trigger: 'blur'
			{ required: true, message: '请输入管理员的注册账号', trigger: 'blur' },
			{ pattern: /^[0-9]{1,10}$/, message:"不能以0开头,因为数据库存储int", trigger: 'blur' },
		],
		password: [
			{ required: true, message: '请输入管理员的注册密码', trigger: 'blur' },
			{ pattern: /^(?=.*[a-z])(?!\d+$)[a-z\d]{6,12}$/, message:"密码至少带一个小写字母，长度6-12", trigger: 'blur' },
		],
		name: [
			{ required: true, message: '请输入管理员的名字', trigger: 'blur' },
		],
		sex: [
			{ required: true, message: '请输入管理员的性别', trigger: 'blur' },
		],
		email: [
			{ required: true, message: '请输入管理员的邮箱', trigger: 'blur' },
			{ pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/, message:"请输入管理员的邮箱", trigger: 'blur' },
		],
		department: [
			{ required: true, message: '请输入管理员的部门', trigger: 'blur' },
		],
	})

  // 部门数据
	// const departmentData = ref(['办公室', '质检部', '总裁厅', '宣传部', '研发部', '组织部', '警卫部'])
	const departmentData = ref([])
	const returnDepartment = async() => {
		const res = await getDepartment()
		departmentData.value = res.data
	}
	returnDepartment()

	bus.on('createId', (id : number) => {
		// 使用 Object.keys() 方法获取 formData 对象的所有键，然后通过 forEach 循环将每个键对应的值设置为 null
		Object.keys(formData).forEach((key)=>{  
			formData[key] = null;  
    });
		if (id == 1) {
			title.value = '新建产品管理员'
			formData.identity = '产品管理员'
		}
		if (id == 2) {
			title.value = '新建用户管理员'
			formData.identity = '用户管理员'
		}
		if (id == 3) {
			title.value = '新建消息管理员'
			formData.identity = '消息管理员'
		}
	})

  // 创建管理员
  const addAdmin = async() => {
    const res = await createAdmin(formData)
    if(res.data.status === 0){
      ElMessage({
				message: '创建管理员成功',
				type: 'success',
			})
			//  adminDialogOff   1为创建管理员
      bus.emit('adminDialogOff',1)
			dialogFormVisible.value = false 
			// 	window.parent.location.reload()
    }else{
      ElMessage.error('创建管理员失败') 
			dialogFormVisible.value = false
    }
  }

  // ----------------------------------------------------------------------------------------
  // 弹窗开关
	const dialogFormVisible = ref(false)
  // 打开创建管理员的弹窗
  const open = () => {
    dialogFormVisible.value = true
  }
  defineExpose({
    open
  })
  onBeforeUnmount(()=>{
    bus.all.clear()
  })
</script>
 
<style lang="scss" scoped>
	.dialog-content {
		display: flex;
		padding: 20px 30px;
	}

	:deep(.el-form-item) {
		margin: 30px;
	}
</style>
